<template>
	<view v-if="tableData.venue" class="payBox">
		<!-- <view v-if="type == 3" class=""> -->
		<view v-if="tableData.refundAuth == 0" class="refundStatusBox refundOne">
			<view class="refundStatusTitle">
				退款审核中
			</view>
			<view class="refundStatusText">
				审核通过将会在3个工作日内返回原账号
			</view>
		</view>
		<view v-if="tableData.refundAuth == 1" class="refundStatusBox refundTwo">
			<view class="refundStatusTitle">
				退款审核通过
			</view>
			<view class="refundStatusText">
				退款金额将在3个工作日内返回原支付账户
			</view>
		</view>
		<view v-if="tableData.refundAuth == null && tableData.refundStatus =='CLOSED'"
			class="refundStatusBox refundThree">
			<view class="refundStatusTitle">
				退款审核不通过
			</view>
			<view class="refundStatusText">
				原因:{{ tableData.refundRejectReason }}
			</view>
		</view>
		<!-- </view> -->
		<view v-if="imgData != ''" class="imgBox">
			<view class="title">
				核销码
			</view>
			<view class="imgDataBox">
				<image :src="imgData" class="img" mode=""></image>
			</view>

		</view>
		<view class="payOrderNum">
			订单编号:{{ tableData.orderNum }}
		</view>
		<view class="payInformation">
			<view class="title">
				场馆信息
			</view>
			<view class="payName">
				<u-icon name="home-fill"></u-icon>
				{{ tableData.venue.name }}
			</view>
			<view class="payLocation">
				<u-icon name="map-fill"></u-icon>
				{{ tableData.venue.location }}
			</view>
			<view class="statusBox">
				<view class="statusText">
					{{statusText}}
				</view>
			</view>
			<view class="navigationBox">
				<view class="navigation" @click="navigationClick(tableData.venue)">
					<img alt="" class="navigationImg"
						src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/NavigationIcon.png">
					<view class="">
						地点导航
					</view>
				</view>
				<view class="navigation venuePhone" @click="phoneClick(tableData.venue.venueTel)">
					<img alt="" class="navigationImg"
						src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/venuePhone.png">
					<view class="">
						联系场馆
					</view>
				</view>
			</view>
		</view>

		<view class="payBook">
			<view class="title">
				预订信息
			</view>
			<view class="payDictName">
				场地类型: {{ tableData.dictName }}
			</view>
			<view class="">
				订场明细:
			</view>
			<view v-for="(item,index) in tableData.items" :key="index">
				<view class="payItem">
					<view class="">
						{{ item.areaName }}
					</view>
					<view class="itemCenter">
						<view class="itemDay">
							{{ item.day }}
						</view>
						<view class="">
							/{{ item.range }}
						</view>
					</view>
					<view class="">
						￥{{ item.price / 100 }}
					</view>
				</view>

			</view>
			<view class="payTotal">
				<view class="totalLeft">
					合计:
				</view>
				<view class="totalRight">
					￥{{ tableData.total }}
				</view>
			</view>
		</view>

		<view class="payTipsBox">
			<view class="title">
				订场须知:
			</view>
			<view class="payTips">
				{{ tableData.venue.tips }}
			</view>

			<view class="title">
				退款声明:
			</view>
			<view class="payRefundStatement">
				{{ tableData.venue.refundStatement }}
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="fixedBox" v-if="type == 0 ">
			<view class="surplusBox">
				<view class="surplusTOtal">
					￥{{ tableData.total }}
				</view>
				<view v-if="tableData.lockTime" class="surplusTime">
					剩余:
					<u-count-down :time="tableData.lockTime" format="HH:mm:ss" @finish="finishEvent"></u-count-down>
				</view>
				<view v-if="tableData.lockTime > 0" class="surplusPay" @click="payClcik">
					去支付
				</view>
			</view>
		</view>
		<view class="fixedBox" v-if="type == 1 || type == 4">
			<view class="surplusBox">
				<view class="surplusPay" @click="refundShow = true;refundReason = ''">
					申请退款
				</view>
			</view>
		</view>
		<u-popup :show="refundShow" mode="center">
			<view class="refundBox">
				<view class="">
					<view class="refundText">
						退款金额(元)
					</view>
					<u--input v-model="tableData.total" border="surround" disabled placeholder="请输入" type="number"
						@change="change">
					</u--input>
				</view>
				<view class="">
					<view class="refundText">
						退款原因
					</view>
					<u--textarea v-model="refundReason" placeholder="请输入"></u--textarea>
				</view>
				<view class="buttonBox">
					<view class="itemBox cancelBox" @click="refundShow = false">
						取消
					</view>
					<view class="itemBox sumbitBox" @click="sumbitClick">
						提交退款申请
					</view>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		myOrderDetail,
		getSign,
		postOrder,
		gainQrcode,
		refundInput
	} from "@/api/challenge";

	export default {
		data() {
			return {
				tableData: {},
				imgData: "",
				selectedId: [],
				type: 0,
				refundShow: false,
				refundReason: '',
				statusText: "待支付",
				intervalId: null,
			}
		},
		onLoad(data) {
			// console.log('data', data);


			myOrderDetail({
				orderNum: data.orderSn
			}).then(res => {
				console.log('详情', res);
				this.type = res.orderStatus
				var now = new Date();
				var timestamp = now.getTime();
				res.lockTime = res.lockTime - timestamp
				var total = 0
				res.items.forEach(item => {
					item.day = item.day.slice(5)

					total += item.price
				})

				res.total = total / 100

				this.tableData = res

				if (res.orderStatus == 4 || res.orderStatus == 1) {
					this.statusText = "待核销"
					uni.showLoading({
						title: '加载中'
					});
					gainQrcode({
						skipUrl: 'subpackageOne/WriteOff/WriteOff',
						scene: this.tableData.id,
						// // 聚力
						appId: "wx5b3843197d34d53b",
					}).then(res => {
						uni.hideLoading();
						this.imgData = 'data:image/png;base64,' + res
					})
					this.intervalId = setInterval(() => {
						myOrderDetail({
							orderNum: data.orderSn
						}).then(params => {
							this.type = params.orderStatus
							if (params.orderStatus == 4 || params.orderStatus == 1) {
								this.statusText = "待核销"
							} else if (params.orderStatus == 0) {
								this.statusText = "待支付"
							} else if (params.orderStatus == 2) {
								this.statusText = "已完成"
								this.imgData = ""
								clearInterval(this.intervalId);
							} else if (params.orderStatus == 3) {
								this.statusText = "售后"
							} else if (params.orderStatus == 5) {
								this.statusText = "已完成"
								this.imgData = ""
								clearInterval(this.intervalId);
							} else if (params.orderStatus == 6) {
								this.statusText = "已取消"
							}
						})

					}, 3000);
				} else if (res.orderStatus == 0) {
					this.statusText = "待支付"
				} else if (res.orderStatus == 2) {
					this.statusText = "已完成"
				} else if (res.orderStatus == 3) {
					this.statusText = "售后"
				} else if (res.orderStatus == 5) {
					this.statusText = "已完成"
				} else if (res.orderStatus == 6) {
					this.statusText = "已取消"
				}
			})

		},
		methods: {
			phoneClick(data) {
				uni.makePhoneCall({
					phoneNumber: data
				});
			},
			navigationClick(data) {

				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = data.y;
						const longitude = data.x;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			},
			sumbitClick() {
				if (this.refundReason == "") {
					uni.$u.toast('请输入退款原因');
				} else {
					refundInput({
						orderNum: this.tableData.orderNum,
						refundReason: this.refundReason
					}).then(res => {

						uni.$u.toast('退库审核提交成功');
						this.refundShow = false
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					})
				}

			},
			finishEvent() {
				// uni.$u.toast("订单超时!");
				// uni.reLaunch({
				// 	url: '/pages/tabbar/venue'
				// });
			},
			payClcik() {
				uni.showLoading({
					title: '加载中'
				});
				var that = this
				getSign({
					prepayId: this.tableData.prepayId,
					selectedIds: this.tableData.params,
					// // 聚力
					appId: "wx5b3843197d34d53b",
				}).then(params => {
					console.log('params', params);
					uni.hideLoading();
					wx.requestPayment({
						"timeStamp": params.timeStamp,
						"nonceStr": params.nonceStr,
						"package": params.package,
						"signType": params.signType,
						"paySign": params.paySign,
						"success": function(successres) {
							postOrder({
								orderSn: that.tableData.orderNum,
								orderAmount: 1,
								payStatus: 1
							}).then(completeres => {
								console.log("查询完成", completeres);
							})
							uni.reLaunch({
								url: '/subpackageOne/venueRelated/venuePayStatus/venuePayStatus?type=1&id=' +
									that.tableData.venue.id
							})
						},
						"fail": function(failres) {
							console.log(failres);
							uni.reLaunch({
								url: '/subpackageOne/venueRelated/venuePayStatus/venuePayStatus?type=2&id=' +
									that.tableData.venue.id
							})
						},
						"complete": function(completeres) {
							console.log('完成', completeres);
						}
					})
				})
			},
		},
		onUnload() {
			clearInterval(this.intervalId);
			// this.intervalId = null
		}
	}
</script>

<style lang="scss" scoped>
	.payBox {
		padding: 10rpx 10rpx;

		.title {
			font-size: 34rpx;
			font-weight: 600;
		}

		.payOrderNum {

			padding: 20rpx 20rpx;
			font-size: 32rpx;
			font-weight: 600;
			box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);
		}

		.payInformation {
			position: relative;
			padding: 20rpx 20rpx 0 20rpx;
			box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);
			margin: 20rpx 0;

			.payName {
				display: flex;
				margin: 30rpx 0;
			}

			.payLocation {
				display: flex;
				margin-bottom: 16rpx;
			}

			.statusBox {
				width: 150rpx;
				height: 114rpx;
				position: absolute;
				top: -46rpx;
				right: 0rpx;
				background: url("https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/seal.png") no-repeat center center / cover;

				.statusText {
					color: #f59a23;
					text-align: center;
					transform: rotate(15deg);
					margin-top: 34rpx;
				}
			}

			.navigationBox {
				display: flex;
				border-top: 2rpx solid #cdcdcd;
				background-color: #fff;

				.navigation {
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 16rpx 0;

					.navigationImg {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}

				.venuePhone {
					border-left: 2rpx solid #cdcdcd;
				}
			}
		}

		.payBook {
			padding: 20rpx 20rpx;
			box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);

			.payDictName {
				margin: 16rpx 0;
			}

			.payItem {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;

				.itemCenter {
					display: flex;

					.itemDay {
						color: #55cdff;
					}
				}
			}
		}

		.payTotal {
			display: flex;
			border-top: 2rpx solid #f2f2f2;
			justify-content: flex-end;
			align-items: center;
			margin-top: 10rpx;
			padding: 16rpx 0 0 0;

			.totalLeft {
				font-size: 34rpx;
				font-weight: 600;
			}

			.totalRight {
				color: red;
				font-size: 34rpx;
			}
		}


		.payTipsBox {
			padding: 20rpx 20rpx;
			box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);
			margin: 20rpx 0;

			.payTips {
				margin: 10rpx 0 36rpx 0;
			}

			.payRefundStatement {
				margin: 10rpx 0 60rpx 0;
			}
		}

		.fixedBox {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			z-index: 9999;
			background-color: #ffffff;
		}

		.surplusBox {
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);
			padding: 16rpx 0;

			.surplusTOtal {
				color: red;
			}

			.surplusTime {
				display: flex;
			}

			.surplusPay {
				background: red;
				color: #fff;
				padding: 10rpx 30rpx;
				border-radius: 6rpx;
			}
		}
	}

	.imgBox {
		box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);
		margin-bottom: 20rpx;

		.title {
			font-size: 34rpx;
			font-weight: 600;
			padding: 10rpx;
		}

		.imgDataBox {

			width: 400rpx;
			height: 400rpx;
			margin: auto;

			.img {
				width: 400rpx;
				height: 400rpx;
			}
		}

	}

	.refundBox {
		width: 600rpx;
		height: 500rpx;
		padding: 20rpx;

		.refundText {
			margin: 10rpx 0;
		}
	}

	.buttonBox {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;

		.itemBox {
			width: 220rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
		}

		.cancelBox {
			background: #81d3f8;
		}

		.sumbitBox {
			background: #d9001b;
		}
	}

	.refundStatusBox {
		text-align: center;
		margin-bottom: 18rpx;

		.refundStatusTitle {
			font-size: 40rpx;
			font-weight: 600;
		}

	}

	.refundOne {
		color: #f59a23;
	}

	.refundTwo {
		color: #70b603;
	}

	.refundThree {
		color: #d9001b;
	}
</style>